import React, { memo, useState, useEffect } from "react";
import css from './css.module.scss'
import RechTitle from '../../../../components/RechTitle'
import { selectAward, selectOneAward } from '../../../../services/home'
import { Tabs } from 'antd';
import { useHistory } from 'react-router-dom';
export default memo(function ExplainForm(props) {
    const { TabPane } = Tabs;
    const [awardList, setAwardList] = useState([])
    const [awardId, setAwardId] = useState('')
    const [content, setContent] = useState('')
    useEffect(() => {
        selectAward({
            pageSize: 1000,
            page: 1,
            awardType: 2
        }).then(res => {
            if (res.data.list !== 0) {
                setAwardList(res.data.list)
            }
        })
    }, [])
    useEffect(() => {
        if (awardList.length !== 0) {
            callback(awardList[0].awardId)
        }
    }, [awardList])
    const { details } = props
    const history = useHistory();
    const callback = (key) => {
        setAwardId(key)
        selectOneAward({ awardId: key }).then(res => {
            console.log(res.data)
            if (res.data.length !== 0) {
                setContent(res.data[0].awardContent)
            }
        })
    }
    const handNavProcess = () => {
        console.log(awardId)
        history.push('/friend?' + awardId);
    }
    return (
        <div className={css.explain_form}>
            <div style={{ marginBottom: "60px" }}>
                <RechTitle title='奖项说明'></RechTitle>
                <Tabs activeKey={awardId + ''} defaultActiveKey={awardId + ''} onChange={callback}>
                    {awardList.map((item, index) => {
                        return (
                            <TabPane tab={item.title} key={item.awardId}>
                                <div className='rech_text' dangerouslySetInnerHTML={{ __html: content }}>
                                </div>
                            </TabPane>
                        )
                    })}
                </Tabs>
            </div>
            <div style={{ marginBottom: "60px" }}>
                <RechTitle title='申报流程' content={details.contestProcess}></RechTitle>
                <div className='du_imgs'>
                    <div className={css.btn} onClick={e => handNavProcess(e)}>
                        立即申报
                    </div>
                </div>
            </div>
        </div>
    )
})
